src/app/manga/[id]/page.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

import { MangaInfoResults } from "../components/requests";
import Image from "next/image";
import { Chip } from "@nextui-org/react";

import MangaDescriptionTabs from "../components/descriptionTabs";

const MangaInfoPage = async ({ params }) => {
	const { id } = params;

	const data = await MangaInfoResults(id);

	return (
		<section>
			<section>
				<section className="m-auto w-full lg:w-9/12">
					{/* header section */}
					<div className="flex items-center p-2">
						<Image
							src={data.image}
							width={170}
							height={280}
							className="rounded-lg"
							alt="Manga Poster"
						/>
						<div className="ml-2">
							<h3 className="text-2xl">
								{data.title.english || data.title.romaji}
							</h3>
							{data.genres &&
								data.genres.map((item, index) => (
									<Chip
										key={index}
										color="warning"
										variant="faded"
										size="sm"
										className="mr-1"
									>
										{item}
									</Chip>
								))}
						</div>
					</div>
					<MangaDescriptionTabs data={data} />
				</section>
			</section>
		</section>
	);
};

export default MangaInfoPage;